import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { getSize } from "@/command/apiTool";
import { useRequest } from "./request";
// import { useRouter } from "vue-router";
import TextView from "@/components/TextView";
import { Divider } from "vant";
import DetailedInfo from "@/components/DetailedInfo";
import InfoCellGray from "@/components/InfoCellGray";
import LineChart from "@/components/LineChart";
import { lineChartData } from "@/components/LineChart/types";
import router from "@/router";

export default defineComponent({
  name: "",
  setup() {
    // const router = useRouter();
    const { queryDhDetail, queryFjDh } = useRequest();
    const render1 = () => {
      return (
        <img src={queryDhDetail.value.entityLogo} class="w-full h-[206px]" />
      );
    };
    const render2 = () => {
      const data = [
        {
          name: "能检农产",
          value: queryDhDetail.value.productName,
          width: "100%",
        },
        {
          name: "营业时间",
          value: queryDhDetail.value.businessDate,
          width: "100%",
        },
        {
          name: "联系方式",
          value: queryDhDetail.value.phone,
          width: "100%",
        },
      ];
      return (
        <DetailedInfo
          {...queryDhDetail.value}
          title={queryDhDetail.value.entityName}
          desc={queryDhDetail.value.address}
          distance={queryDhDetail.value.jl}
          text={data}
        />
      );
    };
    const renderItem = (e: any) => {
      // console.log('附近大户信息',e);

      const buttons: IButtonGroupViewData[] = [
        {
          text: "去申请",
          type: "primary",
          plain: true,
          onClick: () => {
            router.push(`appointmentDetail?id=${e.id}`);
          },
        },
      ];
      return (
        <div>
          <InfoCellGray
            {...{
              title: e.entityName,
              src: e.logo,
            }}
          >
            <TextView>{e.address}</TextView>
            <ButtonGroupView
              data={buttons}
              class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
            />
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const renderChart = () => {
      const data: lineChartData[] = [
        {
          name: "申请数",
          data: [1, 3, 4, 6, 10, 60, 222, 5, 2, 66, 112, 676].reverse(),
          color: "#4485FF",
          areaColor: ["#4485FF", "rgba(255,255,255,0)"],
        },
        {
          name: "受理数",
          data: [1, 3, 4, 6, 10, 60, 222, 5, 2, 66, 112, 676],
          color: "#28C9BF",
          areaColor: ["#28C9BF", "rgba(255,255,255,0)"],
        },
      ];
      const options = {
        xAxis: {
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
          ],
        },
      };
      return (
        <CardView title={"溯源情况"} class="!mt-[15px]">
          <LineChart data={data} options={options} class="!w-[335px]" />
        </CardView>
      );
    };
    const render3 = () => {
      return (
        <CardView class="!mt-[15px]" title="附近大户" radius={0}>
          {queryFjDh.value.map((item: any) => {
            return renderItem(item);
          })}
        </CardView>
      );
    };
    const render4 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "预约申请",
          childClass: "!h-[40px]",
          style: {
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
            border: "none",
            borderRadius: getSize(25),
            width: "100%",
            height: getSize(40),
          },
          onClick: () => {},
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px]"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f3f3f3",
          }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="预约申请" childClass="!p-[0px] !pb-[60px]">
          {render1()}
          {render2()}
          {renderChart()}
          {render3()}
          {render4()}
        </PageTitle>
      );
    };
  },
});
